<template>
<div>

<Nav/>

<div class="container mt-3">
    <Title :title="'Todo'" />
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6" v-for="(task, index) in taskList" :key="index">
          <div class="task-content border p-3">
          <Content :title="task.title" :desc="task.desc" :detail="task.detail" :imgSrc="task.imgSrc"/>

          <OperationBtn/>
          <!-- <div class="content">
            <div>
              <img src="./1.png" title="" style="width: 100%; height: 10rem;"/>
            </div>
            <h4>Task Title</h4>
            <p>Task description</p>
            <p>Task description Task description Task description Task description Task description Task description Task description</p>
          </div> -->
          <!-- <div class="btn_op">
              <button type="button" class="btn btn-primary btn-sm">Start</button>
              <button type="button" class="btn btn-secondary btn-sm">Remove</button>
          </div> -->
          </div>
        </div>
        <!-- <div class="col-lg-4 col-md-4 col-sm-6"> 
          <div class="task-content">
            <Content/>
            <OperationBtn/>
          </div>
        </div> -->
        <!-- <div class="col-lg-4 col-md-4 col-sm-6"> 
          <div class="task-content">
            <Content/>
            <OperationBtn/>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="task-content">
            <Content/>
            <OperationBtn/>
          </div>
        </div> -->
        <!-- <div class="col-lg-4 col-md-4 col-sm-6">
         <h4>Task Title</h4>
          <p>Task description</p>
        </div> -->
        <!-- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 a">a</div> -->
    </div>
</div> 


<div class="container mt-5">
  <Title :title="'Company News'" />
  <div class="row news">
    <!-- 产品图片 -->
    <div class="col-md-6 newsContent">
      <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner newsContent">
          <div class="carousel-item newsContent active">
            <img src="./1.png" class="d-block w-100" style="height:100%" alt="产品图片">
          </div>
          <div class="carousel-item newsContent">
            <img src="./2.png" class="d-block w-100" style="height:100%" alt="产品图片">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
    
    <!-- 产品信息 -->
    <div class="col-md-6 newsContent">
      <h5 class="text-muted">News Title 1</h5>
      <!-- <p class="text-danger fs-4">¥1,299.00</p> -->
      <p class="text-muted">News Title description 1</p>
      <div class="tab-content border-top-0 text-muted">
      News Title description 1 News Title description 1 News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1
      </div>
      
      <!-- <div class="d-grid gap-2">
        <button class="btn btn-primary">立即购买</button>
        <button class="btn btn-outline-secondary">加入购物车</button>
      </div> -->
      
      <!-- <ul class="nav nav-tabs mt-4" id="productTab" role="tablist">
        <li class="nav-item">
          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#description">产品描述</button>
        </li>
        <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#specs">规格参数</button>
        </li>
      </ul> -->
      
      <!-- <div class="tab-content p-3 border border-top-0">
        <div class="tab-pane fade show active" id="description">
          这款智能手表采用先进技术，支持心率监测、睡眠追踪等多项健康功能...
        </div>
        <div class="tab-pane fade" id="specs">
          <ul class="list-unstyled">
            <li>屏幕：1.78英寸 AMOLED</li>
            <li>电池：10天续航</li>
            <li>防水：50米</li>
          </ul>
        </div>
      </div> -->
    </div>
  </div>

  <div class="row">
    <!-- 产品信息 -->
    <div class="col-md-6">
      <h5 class="text-muted">News Title 2</h5>
      <!-- <p class="text-danger fs-4">¥1,299.00</p> -->
      <p class="text-muted">News Title description 1</p>
      <div class="tab-content border-top-0 text-muted">
      News Title description 1 News Title description 1 News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1News Title description 1
      </div>
      
      <!-- <div class="d-grid gap-2">
        <button class="btn btn-primary">立即购买</button>
        <button class="btn btn-outline-secondary">加入购物车</button>
      </div> -->
      
      <!-- <ul class="nav nav-tabs mt-4" id="productTab" role="tablist">
        <li class="nav-item">
          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#description">产品描述</button>
        </li>
        <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#specs">规格参数</button>
        </li>
      </ul> -->
      
      <!-- <div class="tab-content p-3 border border-top-0">
        <div class="tab-pane fade show active" id="description">
          这款智能手表采用先进技术，支持心率监测、睡眠追踪等多项健康功能...
        </div>
        <div class="tab-pane fade" id="specs">
          <ul class="list-unstyled">
            <li>屏幕：1.78英寸 AMOLED</li>
            <li>电池：10天续航</li>
            <li>防水：50米</li>
          </ul>
        </div>
      </div> -->
    </div>

    <!-- 产品图片 -->
    <div class="col-md-6">
      <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./1.png" class="d-block w-100" alt="产品图片">
          </div>
          <div class="carousel-item">
            <img src="./2.png" class="d-block w-100" alt="产品图片">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
    
    
  </div>
</div>

</div>
</template>

<script setup lang="js">
import Nav from './components/nav.vue';
import Content from './components/content.vue';
import OperationBtn from './components/operationBtn.vue';
import Title from './components/title.vue'


const parentMessage = 'Hello from Parent!'

import { ref } from 'vue';

const taskList = ref([
  {
    title: "Task Title 1",
    imgSrc: "http://localhost:3000/_nuxt/1.png",
    desc: "Task description",
    detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
    status: 1
  },
  {
    title: "Task Title 2",
    imgSrc: "",
    desc: "Task description",
    detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
    status: 1
  },
  {
    title: "Task Title 3",
    imgSrc: "http://localhost:3000/_nuxt/2.png",
    desc: "Task description",
    detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
    status: 1
  },
  {
    title: "Task Title 4",
    imgSrc: "http://localhost:3000/_nuxt/1.png",
    desc: "Task description",
    detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
    status: 1
  }
])
</script>


<style>
    /* global styles */
   
    @media (min-width: 1300px) {  
      .row{
        padding: 0 3rem;
      }
    }  

    .task-content{
      /* padding:1rem; */
      margin:0.5rem; 
      /*border:1px solid #efefef; 
      height: auto;*/
    }

    .content{
      height: 24rem;
    }

    
    @media (max-width: 1080px) {  
      .content{
        height: 27rem;
      }
    }

   
   /*
    @media (max-width: 578px) {  
      .content{
        height: 23rem;
      }
    }*/

    
    .row div{
      /* text-align: center; */
      /* padding: 0 45px;n */
    }

    /*
    @media (min-width: 780px) {  
      .btn_op button{
        margin-right: 1rem;
      }
    }

    @media (max-width: 780px) {  
      .btn_op button{
        margin-right: 1rem;
      }
    }
    */

    .btn_op button{
      margin-right: 1rem;
    }

    .news{
      margin: 1rem 0;
    }

    .newsContent{
      height: 18rem;
      overflow: hidden;
    }
</style>